<template>
<!--播放歌曲组件-->
  <div class="player">
    <audio controls autoplay ref="isplay" @click="play">
      <source :src="url" type="audio/mp3"/>
    </audio>
  </div>
</template>

<script>
export default {
    name:'player',
    props:['url'],
    methods:{
      play(){
        this.$refs.isplay.addEventListener("play",()=>{
          this.$store.commit('changPlay',true)
          console.log(this.$store.state.isPlay)
        })
      },
      pause(){
        this.$refs.isplay.addEventListener("pause",()=>{
          this.$store.commit('changPlay',false)
          console.log(this.$store.state.isPlay)
        })
      },
      planTime(){
        var _this=this
        this.$refs.isplay.addEventListener("timeupdate",()=>{
          var number=Math.round(_this.$refs.isplay.currentTime)
          //_this.$store.commit('changTime',number)
          //console.log(number)
          _this.$emit('changTime',number)
        })
      }
    },
    mounted(){
      this.play()
      this.pause()
      this.planTime()
    }
}
</script>

<style scoped lang='less'>
.player{
    position: fixed;
    top: 90%;
    audio{
        width: 100vw;
    }
    audio:focus{
      outline: none;
    }
}
</style>